Categories
JavaScript Best Practices

JavaScript Best Practices for Writing More Robust Code — Checking Object Types

Spread the love

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at how to check the types for objects so that we only work on the type of objects we’re looking for.

instanceof Operator

The JavaScript instanceof operator lets us get the constructor that’s used to create the object.

The syntax for the instanceof operator is the following:

x instanceof Ctor

Where x is the object that we’re checking and Ctor is the constructor that we want to check if it’s created from it.

For instance, we can use it as follows:

function C() {}  
const c = new C();  
console.log(c instanceof C);

The code above has a new constructor function C and we created the c object by invoking the C constructor with the new operator.

Therefore, when we log c instanceof C , then we should see true because c was created from the C constructor.

Note that most objects are also an instance of Object unless we created an object specifically without a prototype.

Therefore, console.log(c instanceof Object); should also be true as we didn’t specifically remove the prototype when we created c.

The instanceof operator checks all the way up the prototype chain, so if it finds the constructor anywhere up the prototype chain, it’ll return true .

Since Object is a prototype of C and c is an instance of C , instanceof returned true .

We have to be careful when we want to check something isn’t an instance of something.

If we want to check if c isn’t an instance of C , we should write:

if (!(c instanceof C)) {  
  //...  
}

instead of:

if (!c instanceof C) {  
  //...  
}

This is because the ! operator is only applied to c rather than c instanceof C in the 2nd example. Therefore, we get false instanceof C instead of !(c instanceof C) since c is truthy and we negated it.

Constructor Name Check

An alternative to instanceof is to check the name of the constructor that created the object with the constructor.name property of an object.

For instance, if we have:

function C() {}  
const c = new C();  
console.log(c.constructor.name);

Then c.constructor.name is 'C' because we created c from the C constructor.

This only returns the name of the constructor that it’s created with so we won’t get any information about anything up the prototype chain.

Structure Checks

To check if the object is what we want to work with, we should also check if a given property and value exists.

We can do that with the object instance’s hasOwnProperty method, or we can check if the type of the property is 'undefined' or not.

It only checks if a property is an own property, which means that it’s not a property inherited from an object up the prototype chain.

For instance, we can write the following code to check that:

const obj = {};  
obj.foo = 42;  
console.log(obj.hasOwnProperty('foo'));

In the code above, we have obj.hasOwnProperty(‘foo’) . Since obj has the property foo , obj.hasOwnProperty(‘foo’) returns true .

hasOwnProperty will return true even if the value of the property is null or undefined . As long as it’s added to the object, it’ll return true .

Also, we can use the JavaScript in operator to check if a property is in an object.

The in property is used to check whether an inherited or own property is included in a given object.

For instance, if we have:

const obj = {};  
obj.foo = 42;  
console.log('foo' in obj);  
console.log('constructor' in obj);

Then both console logs show true because 'foo' is an own property of obj , while 'constructor' is a property that’s inherited from Object , which is a prototype of obj .

Like with hasOwnProperty , the in operator also returns true if the value of a property is null or undefined .

If we want to check if a property isn’t null or undefined , we can write the following:

const obj = {};  
obj.foo = 42;  
console.log(typeof obj.foo !== 'undefined' && obj.foo !== null);

In the code above, we have:

typeof obj.foo !== 'undefined' && obj.foo !== null

to check if obj.foo isn’t undefined with the typoef operator and check is obj.foo isn’t null with the !== operator.

Conclusion

We can check if an object is an instance of a constructor by using the instanceof operator or using the constructor.name property of an object.

Also, we have to check if a property is what we’re looking for so that we know that we’re working on the right object. To do that, we can use hasOwnProperty , in , or typeof operators.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *